<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>子组件向父组件传值&v-model的庐山真面目</h1>
    <p>如果要在自定义组件上监听原生事件，需要添加.native这个修饰符</p>
    <p>例如： @click.native="clickHandler"</p>
    <input v-model="newVal">
    <hr>
    <!-- 使用v-model用做子组件向父组件传值 -->
    <zth v-model="newVal"></zth>
    <label>观察v-model监听的组件对应的值</label>
    <input type="text" v-model="newVal">
    <hr>
    <p>{{msg}}</p>
    <!-- <input type="text" v-model="msg"> -->
    <input type="text" @input="msg = $event.target.value" :value="msg">
    <hr>
    <hr>
    <hr>
    <!-- 使用v-model用做父组件向子组件传值 -->
    <cz :value="person"></cz>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data() {
        return {
          newVal: 0,
          msg: 'hello',
          person: '欧尼'
        }
      },
      components: {
        zth: {
          template: 
          `
            <div style="width:200px; height: 200px; border: 1px solid #666">
              <input v-model="num">
              <button @click="add">+1</button>
            </div>
          `,
          data() {
            return {
              num: 1
            }
          },
          methods: {
            add() {
              // .....
              this.num += 1;
              // 自定义事件
              // this.$emit('zwh', this.num,666)
              this.$emit('input', this.num)
            }
          }
        },
        cz: {
          template: '<p>来自星星的问候：{{value}}</p>',
          props: ['value']
        }
      },
      methods: {
        clickHandler() {
          alert(666)
        },
        zwhHandler(val) {
          this.newVal = val
        }
      },
    })
  </script>
</body>
</html>